<template>
	<view>
		<view class="content">
			<ren-calendar ref='ren' :markDays='markDays' :staffschedulingData="noAttendance" :signIn="signIn"
				:lateArray="lateArray" :leaveAarly="leaveAarly" :askForLeave="askForLeave" :restArray="restArray"
				:headerBar='true' @onDayClick='onDayClick' @year="getYear"></ren-calendar>
			<view class="change">选中日期：{{curDate}}</view>
			<view class="tip">
				<view class="item">
					<view class="top"></view>
					<view class="button">
						未考勤
					</view>
				</view>
				<view class="item">
					<view class="top1"></view>
					<view class="button">
						签到
					</view>
				</view>
				<view class="item">
					<view class="top2"></view>
					<view class="button">
						迟到
					</view>
				</view>
				<view class="item">
					<view class="top3"></view>
					<view class="button">
						早退
					</view>
				</view>
				<view class="item">
					<view class="top4"></view>
					<view class="button">
						请假
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import RenCalendar from '@/components/ren-calendar/ren-calendar.vue'
	export default {
		components: {
			RenCalendar
		},
		data() {
			return {
				StaffSchedulingData: [], //排班结果
				noAttendance: [], //未考勤数组 组件用staffschedulingData接收
				signIn: [], //签到数组
				lateArray: [], //迟到数组
				leaveAarly: [], //早退数组
				askForLeave: [], //请假数组
				restArray: [], //休息数组
				curDate: '', //当前日期
				curYear: '',
				curMonth: '',
				yg_id: '',
				markDays: [] //今天数组
			}
		},
		onReady() {
			let today = this.$refs.ren.getToday().date;
			this.curDate = today;
			if (this.curDate) {
				this.curYear = this.curDate.substring(0, 4)
				this.curMonth = this.curDate.substring(6, 7)
			}
			// this.markDays.push(today);
			this.getStaffScheduling(this.yg_id, this.curYear, this.curMonth)
		},
		onLoad(options) {
			let yg_id = options.yg_id;
			this.yg_id = yg_id;
		},
		methods: {
			getYear(y, m) {
				// console.log("年" + y)
				// console.log("月" + m)
				// console.log("当前年月" + this.curDate)
				this.getStaffScheduling(this.yg_id,y,m)
			},

			onDayClick(data) {
				this.curDate = data.date;
			},
			//获取员工排班结果
			getStaffScheduling(a, b, c) {
				let _that = this;
				// console.log("员工id:" + user_id)
				// console.log("员工id:" + a)
				// console.log("年:" + b)
				// console.log("月:" + c)
				uni.request({
					url: getApp().globalData.url + '/client/GetBaiblist?id=' + a + '&year=' + b + '&month=' + c,
					method: 'GET',
					data: {},
					header: {
						"Content-Type": "application/json"
					},
					success: function(res) {
						// console.log(888, res)
						if (res.data.code == 200 && res.data.msg == '查询成功') {
							_that.StaffSchedulingData = res.data.data;
							_that.bianli();
						} else if (res.data.code == 400) {
							uni.showToast({
								icon: 'none',
								position: 'center',
								title: "查询排班数据为空"
							});
						} else {
							uni.showToast({
								icon: 'none',
								position: 'center',
								title: "请求异常"
							});
						}
					}
				})
			},
			bianli() {
				for (let i = 0; i < this.StaffSchedulingData.length; i++) {
					let sbriqFlag = this.StaffSchedulingData[i].bcid
					if (sbriqFlag != null && sbriqFlag != 'undefind' && sbriqFlag != '' && sbriqFlag != {}) {
						if (this.StaffSchedulingData[i].kqzt == 0) {
							this.noAttendance.push(this.StaffSchedulingData[i].sbriq)
						} else if (this.StaffSchedulingData[i].kqzt == 1) {
							this.signIn.push(this.StaffSchedulingData[i].sbriq)
						} else if (this.StaffSchedulingData[i].kqzt == 2) {
							this.lateArray.push(this.StaffSchedulingData[i].sbriq)
						} else if (this.StaffSchedulingData[i].kqzt == 3) {
							this.leaveAarly.push(this.StaffSchedulingData[i].sbriq)
						} else {
							this.askForLeave.push(this.StaffSchedulingData[i].sbriq)
						}
					} else {
						//为休息数据数组
						this.restArray.push(this.StaffSchedulingData[i].sbriq)

					}
				}

				// console.log(9999,this.noAttendance)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.change {
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
		}

		.tip {
			height: 80rpx;
			display: flex;
			justify-content: center;

			.item {
				height: 80rpx;
				width: 80rpx;
				margin: auto 15rpx auto 15rpx;

				.top {
					height: 40rpx;
					width: 80rpx;
					background-color: #18BC37;
				}

				.top1 {
					height: 40rpx;
					width: 80rpx;
					background-color: #007AFF;
				}

				.top2 {
					height: 40rpx;
					width: 80rpx;
					background-color: #3F536E;
				}

				.top3 {
					height: 40rpx;
					width: 80rpx;
					background-color: #FF007F;
				}

				.top4 {
					height: 40rpx;
					width: 80rpx;
					background-color: #FF9900;
				}

				.top5 {
					height: 40rpx;
					width: 80rpx;
					background-color: #29BEB2;
				}

				.button {
					height: 40rpx;
					width: 80rpx;
					font-size: 24rpx;
					font-weight: bold;
					text-align: center;
				}
			}
		}
	}
</style>
